import {useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
// 导入api
import {getOrderList} from '../../../api/index'
// 导入 tab
import {Table} from 'antd'
function OrderList() {
    // 定义订单列表
    const [orderlist,setOrderlist] = useState([]); 
    // 分页信息
    const [pagination,setPagination]  =useState({})
    // 模拟生命周挂载，获取接口数据
    useEffect(()=>{
        getOrderList()
        .then(res=>{
            console.log(res,"res");
            if(res.data.code==0){
                // 更新列表与分页
                setOrderlist(res.data.list.item_list);
                setPagination(res.data.list.pagination);
            }
        })
        .catch(err=>console.log(err))
    },[])

    // 表格列
    const columns = [
        {
          title: '订单编号',
          dataIndex: 'order_sn',
          render: (text) => <Link to={'/admin/orderdetail/'+text}>{text}</Link>,
        },
        {
          title: '车辆编号',
          dataIndex: 'bike_sn',
        },
        {
          title: '用户名',
          dataIndex: 'user_name',
        },
        {
            title: '手机',
            dataIndex: 'mobile',
        },
        {
            title: '里程',
            dataIndex: 'distance',
        },
        {
            title: '行驶时长',
            dataIndex: 'total_time',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '开始时间',
            dataIndex: 'start_time',
        },
        {
            title: '结束时间',
            dataIndex: 'end_time',
        },
      ];
    //  行别选择
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
        disabled: record.name === 'Disabled User',
        // Column configuration not to be checked
        name: record.name,
        }),
    };

    return ( <div>
        
        <Table
        rowSelection={{
          type: 'radio',
          ...rowSelection,
        }}
        columns={columns}
        dataSource={orderlist}
      />
    </div> );
}

export default OrderList;